<template>
	<view class="ranking-page">
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="header-title">全国月激活排行榜</view>
			<view class="header-subtitle">当月直推激活前10名</view>
		</view>

		<!-- 前三名特殊展示 -->
		<view class="top-three-section" v-if="rankingList.length >= 3">
			<view class="podium">
				<!-- 第二名 -->
				<view class="podium-item second">
					<view class="podium-rank">2</view>
					<view class="podium-avatar">
						<image :src="rankingList[1]?.avatar || '/static/img/default_avatar.png'" class="avatar-img"></image>
					</view>
					<view class="podium-name">{{ rankingList[1]?.nickname || '用户' + rankingList[1]?.id }}</view>
					<view class="podium-count">{{ rankingList[1]?.activation_count }}单</view>
					<view class="podium-medal">
						<image src="/static/img/medal_silver.png" class="medal-img"></image>
					</view>
				</view>

				<!-- 第一名 -->
				<view class="podium-item first">
					<view class="podium-rank">1</view>
					<view class="podium-avatar">
						<image :src="rankingList[0]?.avatar || '/static/img/default_avatar.png'" class="avatar-img"></image>
					</view>
					<view class="podium-name">{{ rankingList[0]?.nickname || '用户' + rankingList[0]?.id }}</view>
					<view class="podium-count">{{ rankingList[0]?.activation_count }}单</view>
					<view class="podium-medal">
						<image src="/static/img/medal_gold.png" class="medal-img"></image>
					</view>
				</view>

				<!-- 第三名 -->
				<view class="podium-item third">
					<view class="podium-rank">3</view>
					<view class="podium-avatar">
						<image :src="rankingList[2]?.avatar || '/static/img/default_avatar.png'" class="avatar-img"></image>
					</view>
					<view class="podium-name">{{ rankingList[2]?.nickname || '用户' + rankingList[2]?.id }}</view>
					<view class="podium-count">{{ rankingList[2]?.activation_count }}单</view>
					<view class="podium-medal">
						<image src="/static/img/medal_bronze.png" class="medal-img"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 排行榜列表 -->
		<view class="ranking-list">
			<view class="list-header">
				<view class="header-text">当月排行榜</view>
				<view class="header-count">前{{ rankingList.length }}名</view>
			</view>
			
			<view class="list-content">
				<view 
					class="ranking-item" 
					v-for="(item, index) in rankingList" 
					:key="item.id"
					:class="{'top-three-item': index < 3}"
				>
					<view class="item-rank">{{ index + 1 }}</view>
					<view class="item-avatar">
						<image :src="item.avatar || '/static/img/default_avatar.png'" class="avatar-img"></image>
					</view>
					<view class="item-info">
						<view class="item-name">{{ item.nickname || '用户' + item.id }}</view>
						<view class="item-desc">本月激活{{ item.activation_count }}单</view>
					</view>
					<view class="item-medal" v-if="index < 3">
						<image :src="getMedalIcon(index)" class="medal-icon"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="rankingList.length === 0 && !loading">
			<image src="/static/img/icon_wodedingdan.png" class="empty-icon"></image>
			<text class="empty-text">当月暂无激活数据</text>
		</view>

		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getActivationRanking } from '@/utils/api'

// 定义类型接口
interface RankingItem {
	id: number
	nickname: string
	avatar?: string
	activation_count: number
}

interface ApiResponse {
	code: number
	msg: string
	data: any
}

// 响应式数据
const rankingList = ref<RankingItem[]>([])
const loading = ref(true)

// 生命周期
onLoad(() => {
	loadRankingList()
})

// 方法
const loadRankingList = async () => {
	loading.value = true
	try {
		// 调用API获取排行榜数据
		const res = await getActivationRanking() as ApiResponse
		
		if (res.code === 1) {
			rankingList.value = res.data.list || []
		} else {
			throw new Error(res.msg || '加载排行榜失败')
		}
		
	} catch (error) {
		console.error('加载排行榜失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 获取奖牌图标
const getMedalIcon = (index: number) => {
	const icons = [
		'/static/img/medal_gold.png',    // 金牌
		'/static/img/medal_silver.png',  // 银牌
		'/static/img/medal_bronze.png'   // 铜牌
	]
	return icons[index] || ''
}
</script>

<style lang="scss" scoped>
@import './ranking.scss';
</style>
